/**
 * 自定义InputNumber组件
 */
import React from 'react';
import { InputNumber } from 'antd';
import PropTypes from 'prop-types';
import styles from './style.less';

class inputnumber extends React.PureComponent {
  static defaultProps = {
    id: undefined, // 唯一标识
    max: undefined, // 最大值
    min: undefined, // 最小值
    // formatter: () => {}, // 指定输入框展示值的格式
    // parser: () => {}, // 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
    step: 1, // 每次改变步数
    disabled: false, // 是否禁用,默认为false
    precision: undefined, // 数值精度，配置 formatter 时会以 formatter 为准
    prefix: '', // 前缀
    value: undefined, // 值
    unit: undefined, // 单位
    unitNum: 1, // 默认有单位时，单位字数为1
    splitStyle: false, // 是否按千分位展示,默认false
    onBlur: () => {}, // 失焦
    onChange: () => {}, // 改变事件
  };

  render() {
    const { id, value, styleRow = {}, onBlur, step, onChange, min, max, disabled, prefix = '', suffix = '', unit, precision, splitStyle, parser, formatter } = this.props;
    const unitNum = unit ? unit.length : 0;
    const reg = /^[\u4e00-\u9fa5]+$/; // 判断是否是中文
    const isChinese = reg.test(unit);
    return (
      <span className={disabled ? `${styles.suffixDisable} ant-input-number` : 'ant-input-number'} style={{ display: 'inline-flex', alignItems: 'center' }}>
        {/* width: unitNum == 0 ? styleRow.width ? styleRow.width : '100%' : `calc(${styleRow.width ? styleRow.width : '100%'} - ${(isChinese?14:9) * unitNum + 12 * 2}px)`  */}
        <InputNumber
          id={id}
          className={styles.inputNumber}
          style={{ ...styleRow }}
          value={value}
          min={splitStyle ? min || 0 : min}
          max={max}
          precision={precision}
          onChange={onChange}
          onBlur={onBlur}
          step={step}
          placeholder={this.props.placeholder}
          formatter={
            formatter
              ? formatter
              : (value) => {
                  if (splitStyle) {
                    const t = `${value}`.split('.');
                    const temp = `${t[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')}${value.toString().indexOf('.') !== -1 ? '.' : ''}${t[1] || ''}`;
                    return `${prefix}${temp}${suffix}`;
                  } else {
                    return `${prefix}${value}${suffix}`;
                  }
                }
          }
          parser={
            parser
              ? parser
              : (value) => {
                  if (splitStyle) {
                    return value
                      .replace(prefix, '')
                      .replace(suffix, '')
                      .replace(/\$\s?|(,*)/g, '');
                  } else {
                    return value.replace(prefix, '').replace(suffix, '');
                  }
                }
          }
          disabled={disabled}
        />
        {unitNum > 0 && <div className={styles.suffix}>{unit}</div>}
      </span>
    );
  }
}

// props类型
inputnumber.propsTypes = {
  id: PropTypes.number, // 唯一标识
  max: PropTypes.number, // 最大值
  min: PropTypes.number, // 最小值
  formatter: PropTypes.func, // 指定输入框展示值的格式
  parser: PropTypes.func, // 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
  step: PropTypes.number, // 每次改变步数
  disabled: PropTypes.bool, // 是否禁用
  precision: PropTypes.number, // 数值精度，配置 formatter 时会以 formatter 为准
  prefix: PropTypes.element, // 前缀
  value: PropTypes.number, // 值
  unit: PropTypes.string, // 单位
  unitNum: PropTypes.number, // 默认有单位时，单位字数为1
  splitStyle: PropTypes.bool, // 是否按千分位展示
  onBlur: PropTypes.func, // 失焦
  onChange: PropTypes.func, // 改变事件
};

export default inputnumber;
